import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    Picker,
    DeviceEventEmitter
} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import ReactNativePickerSelect from 'react-native-picker-select'
import { getUserInfo, getUserInfoStorage } from "../../../../utils/login";
import { getBankBin } from "../../../../utils/card";
import { API } from "../../../../api";
import Toast from "react-native-easy-toast";
import Loading from '../../../../components/loading/index'
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class AddCreditCard extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: i18n.t('a_bank'),
            headerStyle: {
            },
            headerTintColor: '#0f0f0f',
            headerBackTitle: null,
        }
    }
    constructor() {
        super();
        this.state = {
            userInfo: '',
            name: '',
            cardNumber: '',
            modalVisible: false,
            currentToastInfo: ''
        }
    }
    componentDidMount(): void {
        this._initUserInfo()
    }

    _initUserInfo = async () => {
        const userInfo = await getUserInfoStorage()
        this.setState({
            userInfo
        })
    }

    // 绑定银行卡
    uploadBank = async () => {
        if (!this.state.name || !this.state.cardNumber) {
            this.refs.toast.show(i18n.t('plz_cpl'))
            return
        }
        this.setState({
            modalVisible: true,
            currentToastInfo: i18n.t('loading')
        })
        const res = await API._fetch('uploadBank', {
            bankName: this.state.name,
            bankNumber: this.state.cardNumber
        })
        this.setState({
            modalVisible: false,
            currentToastInfo: ''
        })
        if (res && res.code === 10000) {
            this.refs.toast.show(res.msg || i18n.t('o_success'))
            setTimeout(() => {
                DeviceEventEmitter.emit('refresh_user_info');
                this.props.navigation.goBack()
            }, 0)
        } else {
            this.refs.toast.show(res.msg || i18n.t('o_defeat'))
        }
    }

    render() {
        return (
            <View style={[base.flex_1, base.bg_white, base.content_container]}>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.modalVisible ? (
                    <Loading
                        info={this.state.currentToastInfo}
                    />) : null }
                { this.state.userInfo ? (
                    <View>
                        <View style={[base.bg_white, { borderRadius: 5, marginTop: 15 }]}>
                            { !this.state.userInfo.Kyc === 2 ? (
                                <View style={[base.flex_col_center]}>
                                    <View style={{height: 60, marginTop: 30}}>
                                        <Image style={{height: 60}} resizeMode={'contain'} source={require('@images/mine/add-credit-card.png')}/>
                                    </View>
                                    <View style={[base.flex_row_center, { marginTop: 10}]}>
                                        <Text style={{fontSize: 14}}>{ i18n.t('info19') }</Text>
                                    </View>
                                </View>
                            ) : (
                                <View>
                                    <View style={[base.content_container, { paddingTop: 30, paddingBottom: 20 }]}>
                                        {/*<View style={{ paddingBottom: 30 }}>*/}
                                            {/*<Text style={{ fontSize: 16 }}>姓名： 张三</Text>*/}
                                        {/*</View>*/}
                                        <View style={{paddingBottom: 10}}>
                                            <View>
                                                <Text style={[base.color_orange, { fontSize: 16, marginBottom: 5 }]}>{i18n.t('h_name')}</Text>
                                            </View>
                                            <View style={[base.flex_row_between, { zIndex: 999, marginVertical: 5, height: 45, width: '100%', borderRadius: 5, borderWidth: 0.5, borderColor: '#d2d2d2', paddingHorizontal: 15 }]}>
                                                <TextInput
                                                    style={[base.color_gray, {zIndex: 999, width: '100%'}]}
                                                    value={this.state.name}
                                                    onChangeText={(text) => this.setState({name: text})}
                                                />
                                            </View>
                                        </View>
                                        <View style={{paddingBottom: 10}}>
                                            <View>
                                                <Text style={[base.color_orange, { fontSize: 16, marginBottom: 5 }]}>{ i18n.t('b_num') }</Text>
                                            </View>
                                            <View style={[base.flex_row_between, { marginVertical: 5, height: 45, width: '100%', borderRadius: 5, borderWidth: 0.5, borderColor: '#d2d2d2', paddingHorizontal: 15 }]}>
                                                <TextInput
                                                    style={[base.color_gray, {width: '100%'}]}
                                                    value={this.state.cardNumber}
                                                    onChangeText={(text) => this.setState({cardNumber: text})}
                                                />
                                            </View>
                                        </View>
                                    </View>
                                    <View style={[base.flex_1, base.flex_col_center, { paddingBottom: 30, paddingTop: 50 }]}>
                                        <TouchableOpacity style={{width: '100%', height: 46}} onPress={this.uploadBank}>
                                            <LinearGradient
                                                start={{x: 0, y: 0}}
                                                end={{x: 1, y: 1}}
                                                colors={['#feac1c', '#ff7506']}
                                                style={{ width: '100%', height: 46, borderRadius: 23, justifyContent: 'center', alignItems: 'center' }}
                                            >
                                                <Text style={{color: '#fff', fontSize: 16}}>{i18n.t('save')}</Text>
                                            </LinearGradient>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            ) }
                        </View>
                    </View>
                ) : null }
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
